<template>
  <div class="body">
    <div class="Header-box"></div>
    <div class="page-left">
      <img class="image" src="//src/static/images/nvshen.jpg" alt="" />
      <a class="text" href="">编辑资料</a>
    </div>
    <div class="page-right">
      <div class="info">
        <div class="name">185****4539</div>
        <div class="into">自我介绍一下</div>
      </div>
      <div class="bar">
        <a class="mysc" href="" @click="">我的收藏 </a>
        <a class="mygq" href="">已购歌曲 </a>
        <a class="mygd" href="">我的歌单 </a>
      </div>
    </div>
    <div class="content-box">
      <div class="head-clearfix">
        <div class="title">我的收藏</div>
        <div class="nav-scroll">
          <div class="item1">单曲1</div>
          <div class="item2">专辑1</div>
          <div class="item3">歌单1</div>
          <div class="item4">视频1</div>
        </div>

        <div></div>
      </div>
      <div class="song-box">
        <button class="prima">
          <span class="play">
            <span class="iconfont icon-bofang"></span>
            播放全部</span
          >
        </button>
        <div class="list-title">
          <ul class="datalist">
            <li class="list1">
              <div class="num">序号</div>
              <div class="song-ellipsis">歌曲</div>
              <div class="artist">歌手</div>
              <div class="album">专辑</div>
              <div class="time">时长</div>
            </li>
            <li class="list2">
              <div class="number"><span class="ber" href="">1</span></div>
              <div class="song"><a class="ber2" href="">幻听</a></div>
              <div class="artists"><a class="ber3" href="">许嵩</a></div>
              <div class="albums"><a class="ber4" href="">《梦游计》</a></div>
              <div class="times">3.15</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "User",
});
</script>
<script></script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  font-style: normal;
  box-sizing: border-box;
}
.Header-box {
  height: 280px;
  background-color: #333;
  overflow: hidden;
  position: relative;
}
.page-left {
  position: absolute;
  width: 300px;
  height: 260px;
  background-color: #e61723;
  top: 130px;
  left: 160px;
  z-index: 10;
  overflow: hidden;
}
.page-right {
  width: 900px;
  height: 260px;
  position: absolute;
  right: 160px;
  top: 130px;
  z-index: 135px;
  overflow: hidden;
  background-color: white;
  border-bottom: 1px solid #ccc;
}

.page-footer {
  height: 283px;
  width: 100%;
  border: 1px solid black;
}
.footer-copyright {
  height: 120px;
  width: 100%;
  border: 2px solid #ccc;
}
.text {
  position: absolute;
  width: 100%;
  bottom: 0;
  color: whitesmoke;
  left: 0;
  background-color: #d1111c;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
}

.bar {
  width: 900px;
  height: 50px;
  background-color: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 50px;
  font-size: 14px;
}

.page-left .image {
  height: 120px;
  width: 120px;
  margin: 0 auto;
  display: block;
  margin-top: 50px;
}
.page-right .name {
  width: 142px;
  height: 32px;
}
.info {
  padding: 0 40px;
  position: relative;
  max-width: 99%;
  z-index: 1;
  top: 70px;
}
.name {
  font-size: 24px;
}
.into {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}
.bar {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #f7f7f7;
  color: #ddd;
  height: 50px;
  line-height: 50px;
  z-index: 1;
  box-shadow: 10px 1px 5px #888888;
}
.mysc {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.mysc:hover {
  color: #e61723;
  text-decoration: none;
}
.mygq {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.mygq:hover {
  color: #e61723;
  text-decoration: none;
}
.mygd {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.mygd:hover {
  color: #e61723;
  text-decoration: none;
}

.into {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}
.bar {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #f7f7f7;
  color: #ddd;
  height: 50px;
  line-height: 50px;
  z-index: 1;
}
.mysc {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.mygq {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.mygd {
  color: #909399;
  display: inline-block;
  padding: 0 38px;
  cursor: pointer;
  text-decoration: none;
}
.content-box {
  padding: 80px 0;
  width: 1200px;
  margin: 0 auto;
}

.head-clearfix {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.title {
  display: flex;
  margin-right: 45px;
  font-size: 28px;
  color: #303133;
}

.nav-scroll {
  width: 1043px;
  display: flex;
  align-items: center;
  text-align: center;
}

.item1 {
  padding-left: 0;
  margin-right: 20px;
  font-size: 16px;
  margin-top: 10px;
}
.item2 {
  padding: 0 20px;
  font-size: 16px;
  margin-top: 10px;
}
.item3 {
  padding: 0 20px;
  font-size: 16px;
  margin-top: 10px;
}
.item4 {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 16px;
}
.song-box {
  height: 160px;
  width: 1200px;
  margin: 20px auto;
}
.prima {
  margin-bottom: 20px;
  margin-top: 30px;
  padding: 12px 13px;
  border-radius: 20px;
  height: 40px;
  width: 136px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  background-color: #e61723;
  justify-content: center;
}
.play {
  text-align: center;
}
datalist {
  width: 100%;
  overflow: hidden;
}
ul li {
  height: 50px;
  line-height: 50px;
  margin-left: 2px;
  list-style: none;
  display: flex;
  overflow: hidden;
}
.list1 {
  background-color: #f7f7f7;
  overflow: hidden;
}
.list2 {
  overflow: hidden;
}
.num {
  color: #909399;
  width: 50px;
  padding-left: 15px;
  overflow: hidden;
}
.song-ellipsis {
  color: #909399;
  padding-left: 15px;
  width: 303px;
  overflow: hidden;
}
.artist {
  color: #909399;
  width: 235px;
  padding-left: 15px;
  overflow: hidden;
}
.album {
  color: #909399;
  width: 355px;
  padding-left: 15px;
  overflow: hidden;
}
.time {
  color: #909399;
  padding-left: 15px;
  margin-right: 62px;
}

.number {
  color: #303133;
  width: 50px;
  padding-left: 15px;
  overflow: hidden;
}
.song {
  color: #303133;
  padding-left: 30px;
  width: 303px;
  overflow: hidden;
}
.artists {
  color: #303133;
  width: 235px;
  padding-left: 15px;
  overflow: hidden;
}
.albums {
  color: #303133;
  width: 355px;
  padding-left: 15px;
  overflow: hidden;
}
.times {
  color: #303133;
  margin-right: 62px;
  padding-left: 15px;
  overflow: hidden;
}
.head-clearfix {
  width: 1200px;
  height: 39px;
  display: flex;
  flex-direction: column;
}
.ber {
  color: #303133;
  text-decoration: none;
}
.ber2 {
  color: #303133;
  text-decoration: none;
}
.ber3 {
  color: #303133;
  text-decoration: none;
}
.ber4 {
  color: #303133;
  text-decoration: none;
}
.ber5 {
  text-decoration: none;
}

.ber2:hover {
  color: red;
}
.ber3:hover {
  color: red;
}
.ber4:hover {
  color: red;
}
.play {
  font-size: 14px;
}
.nav-scroll {
  text-align: center;
}
</style>
